<template>
  <div>
    <input 
      v-bind="$attrs" 
      :value="value" 
      :type="type" 
      @input="onInput"
    />
  </div>
</template>
<script>
export default {
  name: 'LgInput',
  inheritAttrs: false, // 去除将父组件传入的props属性都作用到div层, 使用v-bind将父组件的所有属性都绑定到input层
  props:{
    value: {
      type: String
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  methods:{
    findParent(parent){
      while (parent){
        if(parent.$options.name === 'LgFormItem'){
          break
        } else {
          parent = parent.$parent
        }
      }
      return parent
    },
    onInput(event){
      this.$emit('input', event.target.value, event)
      // 查找input的父组件是否有LgFormItem，如果有则执行formitem中的validate方法，实现实时验证
      const parent = this.findParent(this.$parent)
      if(parent){
        parent.$emit('validate')
      }

    }
  }
}
</script>